<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/iview.css"> -->

    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/iview.js"></script>

</head>

<body>
    <div id="app">
        <i-button @click="show">Click me!</i-button>
        <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
    </div>


    
    <div id="app2">
            <Tabs value="name1">
                <Tab-pane label="我是" name="name1">你好<br />
                     <i-button @click="show">Click me!</i-button>
                     <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
                </Tab-pane>
                <Tab-pane label="博主" name="name2" style="height:300px">
                        <Row :gutter="16">
                            <i-Col span="6">
                                <div style="background-color:red">col-6</div>
                            </i-Col>
                            <i-Col span="6">
                                <div style="background-color:black">col-6</div>
                            </i-Col>
                            <i-Col span="6">
                                <div style="background-color:blue">col-6</div>
                            </i-Col>
                            <i-Col span="6">
                                <div style="background-color:green">col-6</div>
                            </i-Col>
                        </Row>
                        <Auto-Complete
                            v-model="value2"
                            @on-search="handleSearch2"
                            placeholder="input here"
                            style="width:200px">
                            <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
                        </Auto-Complete>
                </Tab-pane>
                <Tab-pane label="秋意正寒" name="name3">秋意正寒
                     <Slider v-model="value3" range></Slider>
                    <Row style="margin-left:300px">
                        <i-col span="12">
                            
                        </i-col>
                        <i-col span="12">
                            <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"
                             ></date-picker>
                         
                            
                        </i-col>
                    </Row>
                </Tab-pane>
            </Tabs>
        </div>



        <script >
            new Vue({
                el: '#app2',
                data: {
                   visible: false,
                   value3: [20, 50],
                   value2: '',
                   data2: [],
                   date:{},
                },
                methods: {
                    show: function () {
                        this.visible = true;
                    },
                     handleSearch2 (value) {
                        this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
                            value + '@qq.com',
                            value + '@sina.com',
                            value + '@163.com'
                        ];
                    }
                }
            })
          </script>





    <script>


        new Vue({
            el: '#app',
            data: {
                visible: false
            },
            methods: {
                show: function () {
                    this.visible = true;
                }
            }
        })


    </script>




</body>

</html>